<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车页</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/car.css">
    <script src="./js/car.js"></script>
</head>

<body>

    <!-- 1.头部 -->
    <div id="header">

        <!-- 版心 -->
        <div class="wrap clearfix posrel">

            <!-- 加载log图片 -->
            <div class="header_logimg posabs">
                <img src="./img/login.png">
            </div>

            <!-- 左边文字 -->
            <div class="header_leftcn fl ">
                legochina.cn
            </div>

            <!-- 右边文字 -->
            <div class="header_right fr">
                欢迎光临
                <a style="color: #ff6600; text-decoration:none;" href="#">乐购</a>,请&ensp;登陆\
                <a style="color: #ff6600; text-decoration:none;" href="#">注册</a>
            </div>
        </div>
    </div>

    <!-- 2.菜单 -->
    <div id="container">
        <!-- 版心 -->
        <div class="wrap">
            <!-- 搜索框+购物车 -->
            <div class="searchBox clearfix">
                <!-- 搜索框 -->
                <div class="search fr">
                    <div class="seek clearfix">
                        <!-- 输入框 -->
                        <input type="text" placeholder="创意文具" class="hunt fl" id="oldInput">
                        <!-- 加载搜索图片 -->
                        <div class="search_img fl posrel">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 下拉列表 -->
               <div class="menu fr clearfix">
                   <div class="menu_text fl">配送至</div>
                  <select name="arrdes" id="arrdes" class="fl">
                      <option value="成都高新区三环内">成都高新区三环内</option>
                      <option value="重庆互联网学院">重庆互联网学院</option>
                  </select>
               </div>  
        </div>
    </div>
    <!-- 购物车主要内容 -->
    <div id="main">
       <div class="wrap">
           <div class="main_title">填写并核对订单信息</div>
        <table>
            <thead>
                <th class="check_btn">
                    <input type="checkbox" class="fl checkAll" >全选
                </th>
                <th  class="thead_commodity">商品</th>
                <th  class="thead_unitPrice">单价</th>
                <th  class="thead_quantity">数量</th>
                <th  class="thead_subtotal">小计</th>
                <th  class="thead_operation ">操作</th>
            </thead>
            <tbody>
               <tr>
                   <td>
                       <input type="checkbox" class="radio">
                   </td>
                   <td class="tbody_commodity clearfix">
                       <img src="./img/bookright.jpg" alt="" class="fl">
                       <div class="img_text" class="fl">从你的全世界路过</div>
                   </td>
                   <td class="tbody_unitPrice">
                        41.00
                   </td>
                   <td class="tbody_quantity clearfix">
                       <input type="text" class="fl num" value="1">
                       <div class="plus fl">+</div>
                       <div class="minus fl">-</div>
                   </td>
                   <td class="tbody_subtotal">
                        41.00
                   </td>
                   <td class="tbody_operation">
                       <p class="delet">删除</p>
                       <p>移到我的关注</p>
                   </td>
               </tr>
               <tr>
                    <td>
                        <input type="checkbox" class="radio">
                    </td>
                    <td class="tbody_commodity clearfix">
                        <img src="./img/bookright.jpg" alt="" class="fl">
                        <div class="img_text fl">从你的全世界路过</div>
                    </td>
                    <td class="tbody_unitPrice">
                         41.00
                    </td>
                    <td class="tbody_quantity clearfix">
                        <input type="text" class="fl num" value="1">
                        <div class="plus fl">+</div>
                       <div class="minus fl">-</div>
                    </td>
                    <td class="tbody_subtotal">
                         41.00
                    </td>
                    <td class="tbody_operation">
                        <p class="delet">删除</p>
                        <p>移到我的关注</p>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 结算盒子 -->
        <div class="totalPrice clearfix">
            <input type="checkbox" class="smailBox">
            <span>全选</span>
            <span>删除选中商品</span>
            <span>已选择<span class="digit">1</span>件商品</span>
            <span>总价：<span class="figure">0.00</span>
        </div>
        <button class="settlement fr">去结算</button>
        
       </div>
    </div>
    <!-- 猜你喜欢 -->
    <div id="guess">
     <div class="wrap">
            <div class="popular_titleBox">
                    <!-- 文本盒子 -->
                    <div class="popular_textBox">
                        <!-- 标题 -->
                        <div class="popular_text">
                                猜你喜欢
                        </div>
                    </div>
                    <!-- 内容盒子 -->
                    <div class="popular_titlemainBox clearfix">
                        <!-- 推荐图书 -->
                        <script>
                        let popular = `
                        <div class="popular_ebookBox fl">
                            <div class="popular_ebookBox_imgBox">
                                <img src="./img/whitenight.jpg" alt="">
                            </div>
                            <div class="popular_ebookBox_miniimg">
                                <img src="./img/8price.png" alt="">
                            </div>
                            <div class="popular_ebookBox_mainBox">
                                    白夜行  东野圭吾
                            </div>
                            <!-- 推荐 -->
                            <div class="popular_ebookBox_nominal clearfix posrel">
                                <div class="popular_ebookBox_nominaltext fl">
                                    推荐:
                                    <!-- 星星 -->
                                    <div class="popular_ebookBox_nominalimg fl clearfix posabs ">
                                     <img class="fl" src="./img/cover.png" alt="">
                                     <img class="fl" src="./img/cover.png" alt="">
                                     <img class="fl" src="./img/cover.png" alt="">
                                     <img class="fl" src="./img/cover.png" alt="">
                                     <img class="fl" src="./img/half.png" alt="">
                                 </div>
                                </div>
                                 
                                 <!-- 价格盒子 -->
                                 <div class="popular_ebookBox_priceBox clearfix posrel">
                                     <div class="popular_ebookBox_leftBox fl posabs">￥:38</div>
                                     <div class="popular_ebookBox_rightBox fr posabs">￥:58</div>
                                 </div>
                            </div>
                        </div>
                        `
                        for(i=0;i<5;i++){
                            document.write(popular);
                        }
                        </script>
                    </div>
                </div>
     </div>
    </div>
    <!-- 底部图片 -->
    <div id="img">
            <div class="wrap">
             <img src="./img/footer.png" alt="">
         </div>
         </div>
    <!-- 11.页脚 -->
    <div id="footer">
        <div class="footer_img posrel">
            <div class="imgBox posabs">
                <img src="./img/footer-left.png" alt="">
                <img src="./img/footerleft.png" alt="">
                <img src="./img/footerright.png" alt="">
                <img src="./img/footer-right.png" alt="">
            </div>
        </div>
        <div class="footertitlebox clearfix">
            <div class="footerleft fl">
                <p class="f18 c00">购物指南</p>
                <p class="f16 c66">购物流程</p>
                <p class="f16 c66">发票制度</p>
                <p class="f16 c66">账户管理</p>
                <p class="f16 c66">会员优惠</p>
            </div>

            <div class="footerleft fl">
                <p class="f18 c00">支付方式</p>
                <p class="f16 c66">货到付款</p>
                <p class="f16 c66">网上支付</p>
                <p class="f16 c66">礼品卡支付</p>
                <p class="f16 c66">银行转帐</p>
            </div>
            <div class="footerleft fl">
                <p class="f18 c00">订单服务</p>
                <p class="f16 c66">订单配送查询</p>
                <p class="f16 c66">订单状态说明</p>
                <p class="f16 c66">自助取消订单</p>
                <p class="f16 c66">自助修改订单</p>
            </div>
            <div class="footerleft fl">
                <p class="f18 c00">退换货</p>
                <p class="f16 c66">退换货政策</p>
                <p class="f16 c66">自助申请退换货</p>
                <p class="f16 c66">退换货进度查询</p>
                <p class="f16 c66">退款方式和时间</p>
            </div>
            <div class="footerleft fl">
                <p class="f18 c00">商家服务</p>
                <p class="f16 c66">商家中心</p>
                <p class="f16 c66">运营服务</p>
                <p class="f16 c66">账户管理</p>
                <p class="f16 c66">加入尾品汇</p>
            </div>
        </div>
        <div class="footersynopsis">
            <span>公司简介&emsp;|&emsp;Investor Relations&emsp;|&emsp;网站联盟&emsp;|&emsp;乐购招商&emsp;|&emsp;机构销售&emsp;|&emsp;手机乐购&emsp;|&emsp;官方Blog&emsp;|&emsp;热词搜索</span>
        </div>
        <div class="footer_footertitle">
            <span>Copyright&emsp;(C)&emsp;乐购网&emsp;2004-2016,&emsp;All Rights Reserved</span>
        </div>
        <div class="footer-footerimg posrel">
            <img src="./img/logo_00.png" alt="">
        </div>
    </div>
</body>

</html>